<template>
  <div>
    <van-sticky>
      <van-nav-bar
        title="确认订单"
        left-arrow
        @click-left="onClickLeft(id)"
        fixed
      />
    </van-sticky>
    <van-row type="flex" justify="center">
      <van-col span="24" class="s">
        <div class="takeOver" @click="goEdit(id)">
          <div class="address">{{ address }}</div>
          <div class="nameAndTel">{{ name }}&nbsp;{{ tel }}</div>
        </div>
      </van-col>
    </van-row>
    <van-row type="flex" justify="center">
      <van-col span="24">
            <van-card
              :price="price"
              :title="title"
              :thumb="imgUrl"
              class="goods-card"  
            >
              <template #num>
                <van-stepper v-model="count" />
              </template>
            </van-card>
          </van-col>
    </van-row>
    <van-submit-bar button-text="在线支付" @submit="onSubmit">
      <template #default>
        <div class="price">{{logo}}{{price}}</div>
      </template>
    </van-submit-bar>
    <!-- <van-contact-card type="edit">
        <div class="address">{{user.address}}</div>
    </van-contact-card> -->
  </div>
</template>

<script>
export default {
  name: "Buy",

  data() {
    return {
      id: this.$route.params.id,
      count: this.$route.params.num,
      name: "",
      tel: "",
      address: "",
      imgUrl: "",
      title: "",
      price: "",
      logo: "",
      total:"",
    };
  },

  mounted() {
    this.getUser();
    this.getBuyProduct(this.id);
  },

  methods: {
    onSubmit(){
      this.$toast('购买成功')
    },
    onClickLeft(id) {
      this.$router.push("/details/" + id);
    },
    goEdit(id) {
      this.$router.push("/editList/" + id);
    },
    getUser() {
      this.$axios
        .get("/address")
        .then((res) => {
          this.name = res.data[0].name;
          this.tel = res.data[0].tel;
          this.address = res.data[0].address;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getBuyProduct(id) {
      this.$axios
        .get("/buyList/" + id)
        .then((res) => {
          // console.log(res);
          if (res.statusText == "OK") {
            this.imgUrl = res.data.imgUrl;
            this.title = res.data.title;
            this.price = res.data.price;
            this.logo = res.data.logo;
            this.count = res.data.num;
            // console.log(res.data);
          } else {
            console.log("出错了！");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
.takeOver /deep/ .van-contact-card {
  margin-top: 45px;
  height: 130px;
}
.takeOver {
  width: 393px;
  height: 110px;
  background-color: white;
  margin-top: 45px;
}
.address {
  font-weight: 800;
  font-size: 18px;
  margin-left: 10px;
}
.nameAndTel {
  height: 30px;
  width: 200px;
  margin-left: 10px;
  margin-top: 10px;
}
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
.van-row {
  margin: 10px 0px;
}
.leftbox {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.van-icon {
  color: gray;
}
.van-card__title{
  font-size: 15px;
  font-weight: 600;
}
.van-card__price-integer,.van-card__price-currency{
  font-weight: 600;
  color: red;
  font-size: 18px;
}
.van-submit-bar{
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.price{
  height: 50px;
  width: 150px;
  margin-right: 130px;
  font-weight: 600;
  color: red;
  font-size: 25px;
  margin-top: 20px;
}
</style>